<script lang="ts">
	import { type RunnableType, type Job } from '$lib/gen/index.js'
	import { sendUserToast } from '$lib/utils.js'
	import RunningJobSchemaPicker from '$lib/components/schema/RunningJobSchemaPicker.svelte'
	import { createEventDispatcher, onDestroy } from 'svelte'
	import JobLoader from './runs/JobLoader.svelte'
	import { DataTable } from '$lib/components/table'
	import HistoricList from './HistoricList.svelte'

	export let runnableId: string | undefined = undefined
	export let runnableType: RunnableType | undefined = undefined
	export let loading: boolean = false
	export let selected: string | undefined = undefined

	let historicList: HistoricList | undefined = undefined
	const dispatch = createEventDispatcher()

	let jobs: Job[] = []
	let hasMoreCurrentRuns = false
	let page = 1

	async function handleSelected(data: any) {
		if (selected === data.id) {
			resetSelected(true)
			return
		}
		selected = data.id
		if (data.payloadData === 'WINDMILL_TOO_BIG') {
			const fullPayload = await data.getFullPayload?.()
			dispatch('select', { args: fullPayload, jobId: data.id })
		} else {
			dispatch('select', { args: structuredClone(data.payloadData), jobId: data.id })
		}
	}

	onDestroy(() => {
		resetSelected(true)
	})

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape' && selected) {
			resetSelected(true)
			event.stopPropagation()
			event.preventDefault()
		}
	}

	function handleError(e: { type: string; error: any }) {
		if (e.type === 'load') {
			sendUserToast(`Failed to load input history: ${e.error}`, true)
		}
	}

	let jobHovered: string | undefined = undefined

	export function refresh() {
		historicList?.refresh()
	}

	export function resetSelected(dispatchEvent?: boolean) {
		selected = undefined
		if (dispatchEvent) {
			dispatch('select', undefined)
		}
	}

	function getJobKinds(runnableType: RunnableType | undefined) {
		if (runnableType === 'FlowPath') {
			return 'flow,flowpreview'
		} else if (runnableType === 'ScriptPath') {
			return 'script,preview'
		} else if (runnableType === 'ScriptHash') {
			return 'script,preview'
		}
		return 'all'
	}
</script>

<svelte:window on:keydown={handleKeydown} />

{#if runnableId}
	<JobLoader
		bind:jobs
		path={runnableId}
		isSkipped={false}
		jobKinds={getJobKinds(runnableType)}
		user={null}
		label={null}
		folder={null}
		concurrencyKey={null}
		tag={null}
		success="running"
		argFilter={undefined}
		bind:loading
		syncQueuedRunsCount={false}
		refreshRate={10000}
		computeMinAndMax={undefined}
		perPage={5}
	/>
{/if}

<div class="h-full max-h-full min-h-0 w-full flex flex-col gap-4">
	<div class="grow-0" data-schema-picker>
		<DataTable size="xs" bind:currentPage={page} hasMore={hasMoreCurrentRuns} tableFixed={true}>
			{#if loading && (jobs == undefined || jobs?.length == 0)}
				<div class="text-center text-tertiary text-xs py-2">Loading current runs...</div>
			{:else if jobs?.length > 0}
				<colgroup>
					<col class="w-8" />
					<col class="w-16" />
					<col />
				</colgroup>

				<tbody class="w-full overflow-y-auto">
					{#each jobs as job (job.id)}
						<RunningJobSchemaPicker
							{job}
							selected={selected === job.id}
							hovering={jobHovered === job.id}
							on:select={(e) => handleSelected(e.detail)}
						/>
					{/each}
					{#if jobs?.length == 5}
						<tr class="text-left text-tertiary text-xs w-full">
							<td class="w-full px-2" colspan="3">limited to 5 runs</td>
						</tr>
					{/if}
				</tbody>
			{:else}
				<div class="text-center text-tertiary text-xs py-2">No job currently running</div>
			{/if}
		</DataTable>
	</div>

	<div class="min-h-0 grow" data-schema-picker>
		<HistoricList
			bind:this={historicList}
			on:error={(e) => handleError(e.detail)}
			on:select={(e) => handleSelected(e.detail)}
			{runnableId}
			{runnableType}
			{selected}
		/>
	</div>
</div>
